
<template>
	<view class="cont">
		<view class="header-wrap">
			<image src="../../static/index/1.png" mode="aspectFill" class="image"></image>
			<image src="../../static/index/2.png" mode="aspectFill" class="image1"></image>
		</view>
		<view class="address-wrap">
			<view class="address flex justify items">
				<view class="left">上海市长宁区虹梅路3999号</view>
				<view class="right">
					<image src="../../static/index/3.png" mode="aspectFill" class="first" @click="handleMapLocation()"></image>
					<image src="../../static/index/4.png" mode="aspectFill" @click="call('400-820-8901')"></image>
				</view>
			</view>
		</view>
		<view class="main-wrap flex justify">
			<view class="main" @click="jump('./binding')">
				<image src="../../static/index/8.png" mode=""></image>
				<view>绑定眼镜</view>
			</view>
			<view class="main" @click="jump('./statistics')">
				<image src="../../static/index/7.png" mode=""></image>
				<view>用眼统计</view>
			</view>
			<view class="main" @click="jump('./activity')">
				<image src="../../static/index/6.png" mode=""></image>
				<view>预约试用</view>
			</view>
			<view class="main">
				<image src="../../static/index/5.png" mode=""></image>
				<view>健康商城</view>
			</view>
		</view>

		<view class="list">
			<view class="title">护眼课堂</view>
			<view class="list-mian">
				<image src="../../static/index/9.png" mode="aspectFill"></image>
				<image src="../../static/index/9.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			//拨打电话
			call(res){
				this.$common.call(res);
			},
			//页面跳转
			jump(res){
				this.$common.navigator(res);
			},
			handleMapLocation() {
				console.log('点击了开始导航');
				let latitude = Number(39.5427);
				let longitude = Number(116.2317);
				let address = '天安门';
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude,"上");
							console.log(longitude,"下");
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: latitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 18,
								success: function() {
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res,"用户拒绝之后");
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},


		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	$width:100%;

	.flex {
		display: flex;
	}

	.justify {
		justify-content: space-between;
	}

	.items {
		align-items: center;
	}

	.header-wrap {
		width: $width;
		height: auto;

		.image {
			width: $width;
			height: 414rpx;
			position: absolute;
		}

		.image1 {
			width: 690rpx;
			height: 419rpx;
			margin: 174rpx 30rpx 0 30rpx;
			position: relative;
		}
	}

	.header-top {
		width: 100%;
		height: 414rpx;
		background-color: #2C405A;
	}

	.address-wrap {
		width: 690rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 31rpx auto;

		.address {
			width: 92%;
			height: 100%;
			margin: 0 auto;

			.left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.right {
				image {
					height: 46rpx;
					width: 46rpx;
				}

				.first {
					margin-right: 24rpx;
				}
			}
		}
	}

	.main-wrap {
		width: 660rpx;
		height: auto;
		margin: 10rpx auto 46rpx auto;

		.main {
			justify-content: center;
			text-align: center;

			image {
				width: 112rpx;
				height: 112rpx;
			}

			view {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-top: 18rpx;
			}
		}
	}

	.list {
		width: $width;
		overflow: hidden;
		height: 183rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		.title {
			width: 90%;
			margin: 40rpx auto 0 auto;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #333333;
		}

		.list-mian {
			position: absolute;
			width: 90%;
			height: auto;
			left: 5%;
			z-index: 99;

			image {
				width: 100%;
				height: 194rpx;
				border-radius: 12rpx;
				margin-top: 36rpx;
			}
		}
	}
</style>
